<template>
  <div id="threeBigPieces">
    <!--三大块-->
    <el-row>
      <el-col :span="8">
        <div class="grid-content bg-purple" style="padding-right: 60px">
          <div v-if="userType==0" class="threeBigPieces-c" style="background: linear-gradient(0deg, #FF0000, #FFA8A8);" @click="toPath('learningCommunity')">
            <span>企业环境教育</span>
            <span style="top:70px">重点排污单位环境教育<br>环境警示教育</span>
            <img src="@/assets/images/home/warning-education.png" alt="">
          </div>
          <div v-else-if="userType==1" class="threeBigPieces-c" style="background: linear-gradient(0deg, #FF0000, #FFA8A8);" @click="toPath('learningCommunity')">
            <span>学校环境教育</span>
            <span>教师环境教育、学生环境教育</span>
            <img src="@/assets/images/home/warning-education.png" alt="">
          </div>
          <div v-else class="threeBigPieces-c" style="background: linear-gradient(0deg, #FF0000, #FFA8A8);" @click="toPath('learningCommunity')">
            <span>环保专业能力提升</span>
            <span>生态环境保护专业学习</span>
            <img src="@/assets/images/home/warning-education.png" alt="">
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light" style="padding-right: 60px">
          <div class="threeBigPieces-c" style="background: linear-gradient(0deg, #09509E, #6EB6F3);" @click="toPath1('startExam')">
            <span>模拟考试</span>
            <span>环境保护模拟考试</span>
            <img src="@/assets/images/home/mock-test.png" alt="">
          </div>
        </div>
      </el-col>
      <el-col :span="8" style="width: 360px;">
        <div class="grid-content bg-purple">
          <div class="threeBigPieces-c" style="background: linear-gradient(0deg, #18A19D, #7CE3DC);margin-right: 0" @click="toPath('examList')">
            <span>考试查询</span>
            <span>学满学时即可参加考试</span>
            <img src="@/assets/images/home/subscribe.png" alt="">
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'threeBigPieces',
    data () {
      return {
        userType:''
      }
    },
    created(){
      this.userType = JSON.parse(localStorage.getItem('userInfo')).userType
    },
    methods: {
      toPath(name) {
        this.$router.push({
          name:name,
        })
      },
      toPath1(name) {
        this.$router.push({
          name:name,
          params: {
              type:0,
            id:0,
            time: 120,
          }
        })
      }
    }
  }
</script>

<style scoped>
  #threeBigPieces {
    box-sizing: border-box;
    padding: 60px 0 73px;
  }
 .threeBigPieces-c {
   width: 360px;
   height: 130px;
   border-radius: 8px;
   color: #fff;
   font-size: 20px;
   font-weight: 700;
   position: relative;
 }
 .threeBigPieces-c :first-child {
   position: absolute;
   left: 40px;
   top: 34px;
 }
  .threeBigPieces-c :nth-child(2) {
    position: absolute;
    left: 40px;
    top: 78px;
    font-size: 16px;
    font-weight: 400;
  }
  .threeBigPieces-c img {
    position: absolute;
    right:24px;
    top:25px;
  }
  /deep/
  .el-col-8 {
    width: 420px;
    height: 130px;
  }
  /deep/
  .grid-content{
    width: 100%;
    height: 100%;
  }
</style>
